<template>
    <div class="loadingWrap" v-if="getLoadingStatus || vuex_st_loading">
        <a-spin tip="Loading..." />
    </div>
    <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent, ref, provide, computed, toRaw } from 'vue'
import {useStore} from "vuex";

export default defineComponent({
    name: 'App',
    setup() {
        const store = useStore()

        let vuex_st_loading = computed(()=>{
           return toRaw(store.state.VUE_ST_LOADING)
        })

        let getLoadingStatus = ref(false)
        const setLoadingStatus = (status: boolean)=>{
            getLoadingStatus.value = status
        }
        provide('setLoadingStatus', setLoadingStatus)
        provide('getLoadingStatus', getLoadingStatus)

        return {
            getLoadingStatus,
            vuex_st_loading
        }
    }
})
</script>

<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    & > .ant-layout{
        height: 100vh;
    }

}
.loadingWrap{
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
</style>
